<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="style.css" />
    <script src="vue.js"></script>
  </head>
  <body onload="draw()">
    <div id="vue-app"></div>
    <canvas id="canvas" width="500" height="500">
      你这浏览器不支持这玩意啊
    </canvas>
    <script src="app.js"></script>
    <script>
      function draw() {
        // 让vscode可以显示canvas智能提示
        /** @type {HTMLCanvasElement} */
        const canvas = document.getElementById('canvas')
        if (canvas.getContext) {
          const ctx = canvas.getContext('2d')
          /**
           * canvas 动画原理
           * 1.绘制图像
           * 2.清除图像
           * 3.更新位置
           * 4.重绘
           */

          //矩形小球宽高不变
          let width = 10,height = 10
          //创建小球
          const elements = []
          createAxis(elements, 8)
          renderEle(elements)
          randomSpeed(elements, 4)
          // 随机生成xy
          function createAxis(elements, num) {
            for (let i = 0; i < num; i++) {
              //随机生成位置
              elements[i] = {
                //Math.floor(Math.random() * (max - min + 1) ) + min;
                //10-290
                x: Math.floor(
                  Math.random() * (canvas.width - width - width + 1) + width
                ),
                y: Math.floor(
                  Math.random() * (canvas.height - width - height + 1) + height
                ),
              }
            }
          }
          // 随机生成速度
          function randomSpeed(elements, max) {
            for (let i = 0; i < elements.length; i++) {
              elements[i].speedX = Math.floor(Math.random() * max + 1)
              elements[i].speedY = Math.floor(Math.random() * max + 1)
            }
          }
          //绘制图像
          function renderEle(elements) {
            const colors = [
              'blue',
              'yellow',
              'green',
              'lightgreen',
              'lightblue',
            ]
            for (let i = 0; i < elements.length; i++) {
              ctx.fillStyle =
                colors[Math.floor(Math.random() * (colors.length - 1 + 1) + 1)]
              ctx.fillRect(elements[i].x, elements[i].y, width, height)
            }
          }
          // 开始移动
          /* setInterval(function () {
            // 2.清除图像
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            // 3.更新位置
            for (let i = 0; i < elements.length; i++) {
              elements[i].speedX = determineXPosition(
                elements[i].x,
                elements[i].speedX
              )
              elements[i].x += elements[i].speedX

              elements[i].speedY = determineYPosition(
                elements[i].y,
                elements[i].speedY
              )
              elements[i].y += elements[i].speedY
            }
            // 判断y坐标是否超越边界
            function determineYPosition(axis, orientation) {
              if (axis > canvas.height - height) {
                // rebound
                orientation *= -1
              } else if (axis < 0) {
                orientation *= -1
              }
              return orientation
            }
            // 判断x坐标是否超越边界
            function determineXPosition(axis, orientation) {
              if (axis > canvas.width - width) {
                // rebound
                orientation *= -1
              } else if (axis < 0) {
                orientation *= -1
              }
              return orientation
            }

            // 4.绘制图像
            renderEle(elements)
          }, 30) */
          function optimize() {
            // 2.清除图像
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            // 3.更新位置
            for (let i = 0; i < elements.length; i++) {
              elements[i].speedX = determineXPosition(
                elements[i].x,
                elements[i].speedX
              )
              elements[i].x += elements[i].speedX

              elements[i].speedY = determineYPosition(
                elements[i].y,
                elements[i].speedY
              )
              elements[i].y += elements[i].speedY
            }
            // 判断y坐标是否超越边界
            function determineYPosition(axis, orientation) {
              if (axis > canvas.height - height) {
                // rebound
                orientation *= -1
              } else if (axis < 0) {
                orientation *= -1
              }
              return orientation
            }
            // 判断x坐标是否超越边界
            function determineXPosition(axis, orientation) {
              if (axis > canvas.width - width) {
                // rebound
                orientation *= -1
              } else if (axis < 0) {
                orientation *= -1
              }
              return orientation
            }

            // 4.绘制图像
            renderEle(elements)
            //递归调用
            window.requestAnimationFrame(optimize);
        }
        optimize()
      }
    }
    </script>
  </body>
</html>
